<template>
  <div class="book-catalog" >
    <div class="book-catalog-hide" @click="hideCatalogs"></div>
    <div class="book-catalog-container" >
      <div class="book-catalog-header">
        <div class="book-catalog-header-book-name">{{bookName}}</div>
        <div class="book-catalog-header-total-chapter">连载至第{{totalChapters}}章</div>
        <hr />
        <div class="book-catalog-header-current">当前阅读至：第{{chapterOrder}}章</div>
      </div>
      <ul @click="gotoChapter">
        <li v-for="chapter in chapterList" :key="chapter.id" :value="chapter.order">
          第{{chapter.order}}章 {{chapter.title}}
        </li>
      </ul>
      <div class="book-catalog-bottom">
        <div class="book-catalog-button-group">
          <button @click="pre">上一页</button>
          <button @click="next">下一页</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBookChapterList } from '@/api/book.js'

export default {
  props: {
    bookId: Number,
    chapterOrder: Number,
    bookName: String,
    totalChapters: Number 
  },
  data() {
    return {
      chapterList: [],
      pageSize: 20,
      page: 0
    }
  },
  computed: {

  },
  mounted() {
    console.log(this.chapterList)
  },
  watch: {
    chapterOrder(newChapterOrder, oldChapterOrder) {
      this.page = Math.ceil(this.chapterOrder / this.pageSize)
      getBookChapterList(this.bookId, this.page, this.pageSize).then( (response) => {
        if (response.status == 200) {
          this.chapterList = response.data.chapterList
          console.log(this.chapterList)
        }
      })
    }
  },
  methods: {
    gotoChapter(e){
      var order = e.target.value
      this.$emit("goto-chapter", order)
    },
    hideCatalogs() {
      this.$emit("hide-catalogs")
    },
    pre() {
      if ( this.page <= 1) {
        alert("已经是第一页了")
      }
      this.page -- 
      getBookChapterList(this.bookId, this.page, this.pageSize).then( (response) => {
        if (response.status == 200) {
          this.chapterList = response.data.chapterList
          console.log(this.chapterList)
        }
      })
    },
    next() {
      this.page ++
      getBookChapterList(this.bookId, this.page, this.pageSize).then( (response) => {
        if (response.status == 200) {
          var chapters = response.data.chapterList
          if ( chapters.len == 0) {
            alert("已经是最后一页了")
            this.page -- 
            return
          }
          this.chapterList = chapters
        }
      })
    }
  }
}
</script>

<style>
.book-catalog {
  z-index: 1;
  position: absolute;
  background-color: #38393a17;
  width: 100%;
  height: 100%;
}
.book-catalog-hide{
  z-index: 1;
  position: absolute;
  background-color: #38393a17;
  width: 100%;
  height: 100%;
}
.book-catalog-container {
  z-index: 2;
  position: absolute;
  background-color: beige;
  width: 80%;
  height: 100%;
  padding: 0% 5%;
}
.book-catalog-header {
  height: 15%;
  padding-top: 5%;
}
.book-catalog-header-book-name{
  font-size: x-large;
}
.book-catalog-header-total-chapter{
  font-size: xx-small;
  font-variant-caps: all-small-caps;
  color: gray;
}
.book-catalog-header-current{
  font-size: small;
}
.book-catalog ul{
  list-style-type: none;
  margin: 0%;
  padding: 0%;
  height: 75%;
}
.book-catalog li{
  margin: 5px 0px 5px 0px;
}
.book-catalog-bottom {
  height: 5%; 
}
.book-catalog-button-group {
  position: absolute;
  right: 5%;
}
.book-catalog-button-group button{
  margin: 10px;
}
</style>